<!--  -->
<template>
  <div class="box-footer editor-theme-color">
    <div class="notice-u"><i class="el-icon-warning"></i> 说明：这里颜色选择只针对当前主题模板，如果您还想更换主题，请先移步主题模板，选好主题点击保存再来选择主题颜色。</div>
    <div class="dlg-main-box colorBox-u" :class="isdrawer ? 'colorBox-drawer-u' : ''">
      <div
        class="color"
        v-if="response && response.color"
      >
        <span
          v-for="(item, index) in response.themeColor.color"
          :key="index"
          :class="{'item':true, 'cur': parseInt(index) === parseInt(response.color)}"
          :style="'background-color: '+item+';'"
          @click.stop="chooseColor(index)"
        >
          <i
            class="el-icon-check"
            :style="'color: '+item+';'"
          ></i>
        </span>
        <span @click.stop="chooseColor('custom')" class="custom-u" :class="{'item':true, 'cur': response.color === 'custom'}" v-if="response.customThemeColor">自定义 <i
            class="el-icon-check"
          ></i></span>
      </div>
      <div v-if="response.color === 'custom' && response.customThemeColor && response.customThemeColor.custom.length > 0" class="custom-color-u">
        <el-divider content-position="left">自定义颜色设置</el-divider>
        <div v-for="(item, index) in response.customThemeColor.custom" :key="index">
          <Color :defValue="item.value" :chgValue="(d)=>{item.value = d}" :title="item.label" :info="item.info"/>
        </div>
      </div>
    </div>
    <div class="btn-footer">
      <el-button
        size="small"
        @click.stop="close"
      >取消</el-button>
      <el-button
        type="primary"
        size="small"
        @click.stop="save"
      >
        保存</el-button>
    </div>
  </div>
</template>

<script>
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import { mapState } from 'vuex'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
export default {
  props: {
    dialogClose: {
      type: Function
    },
    isdrawer: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: true,
      response: {}
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.loading = true
      this.$post('/site/get-current-theme-color', null).then(response => {
        this.response = response
        this.loading = false
      })
    },
    chooseColor (index) {
      if (parseInt(index) === parseInt(this.response.color)) {
        return
      }
      this.response.color = '' + index
    },
    close () {
      this.loading = true
      this.response = {}
      this.dialogClose()
    },
    save () {
      this.loading = true
      let custom = this.response.customThemeColor.custom.map(item => {
        if (!item.value) {
          item.value = item.defaultColor
        }
        return item
      })
      this.response.customThemeColor.custom = custom
      let customThemeColor = JSON.stringify(this.response.customThemeColor)
      this.$post('/site/update-site-theme-color', {
        color: this.response.color,
        customThemeColor: customThemeColor
      }).then(rsp => {
        this.loading = false
        BackendjsFunctions.updateSiteThemeColor(rsp.color)
      })
      this.close()
    }
  },
  components: {
    Color
  }
}

</script>
<style scoped>
.editor-theme-color .colorBox-u {
  padding-top: 20px;
  min-height: 360px;
}
.editor-theme-color .colorBox-drawer-u{
  height: calc(100vh - 226px);
}
.editor-theme-color .color {
  text-align: center;
}
.editor-theme-color .color .item {
  display: inline-block;
  margin: 5px 6px;
  width: 30px;
  height: 30px;
  line-height: 28px;
  cursor: pointer;
  background-color: #000000;
  border: 2px solid #ffffff;
}
.editor-theme-color .color .custom-u {
  width:80px;
  background-color: #fff;
  border-color:#e9e9e9;
  text-align: center;
}
.editor-theme-color .color .cur {
  border-color: #409eff;
  opacity: 0.8;
  cursor: not-allowed;
  font-size: 18px;
}
.editor-theme-color .color .custom-u.cur{
  font-size: 14px;
  background: #258FFB;
  color: #fff;
}
.editor-theme-color .color .custom-u i{
  display: none;
}
.editor-theme-color .color .cur i {
  color: #fff !important;
}
.editor-theme-color .color .custom-u.cur i {
  display: inline-block;
}
.custom-color-u{
  margin-top: 40px;
}
.custom-color-u /deep/ .el-divider__text {
  color: #aaa;
}
</style>
